<template>
  <div class="reply">
    <van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
      <van-cell title="当前评论"></van-cell>
      <comment :isReply="false" :item="currentCom"></comment>
      <van-cell title="评论的回复"></van-cell>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <comment v-for="(item, index) in replyList" :key="index" :isReply="false" :item="item"></comment>
      </van-list>
      <write :isReply="true" :comid="currentCom.com_id" @passCom="passCom"></write>
    </van-popup>
  </div>
</template>

<script>
import comment from './comment'
import write from './write'
import { apiGetReply } from '@/api/comment.js'

import bus from '@/utils/bus.js'
export default {
  components: {
    comment,
    write
  },
  data () {
    return {
      show: false,
      currentCom: {},
      loading: false,
      finished: false,
      offset: null,
      limit: 10,
      replyList: [],
      endid: null
    }
  },
  methods: {
    async onLoad () {
      const res = await apiGetReply({
        // 获取到的评论id 是一个对象-JSONBig转换过的
        comid: this.currentCom.com_id.toString(),
        offset: this.offset,
        limit: this.limit
      })
      console.log('评论的回复', res)
      this.replyList = [...this.replyList, ...res.data.results]
      this.offset = res.data.last_id
      this.endid = res.data.end_id
      this.loading = false
      if (this.offset === this.endid) {
        this.finished = true
      }
    },
    // 刷新回复列表
    passCom (val) {
      this.replyList.push(val)
      // console.log('currentCom', this.currentCom)
      this.currentCom.reply_count += 1
    }
  },
  created () {
    // 通过bus对象 接收comment组件传递的数据
    bus.$on('passValue', val => {
      this.currentCom = val
      // 每次打开面板时，都重新渲染数据
      this.loading = false
      this.finished = false
      this.offset = null
      this.replyList = []
      this.endid = null
    })
  }
}
</script>

<style>

</style>
